<template>
  <div id="hjtjChar" style="width:100%;height:100%"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    setTimeout(() => {
      this.getChars();
    }, 200);
  },
  methods: {
    getChars() {
      var BorderWidth = this.$fontSize(0.2);
      //反方向剩下部分的样式
      var placeHolderStyle = {
        normal: {
          label: {
            show: false,
            position: "center"
          },
          labelLine: {
            show: false
          },
          color: "rgba(0,0,0,0)",
          borderWidth: 1
        },
        emphasis: {
          color: "#dedede",
          borderColor: "#dedede",
          borderWidth: 0
        }
      };
      // 初始化echarts实例
      let fruitChart = this.$echarts.init(document.getElementById("hjtjChar"));
      fruitChart.setOption({
        /* backgroundColor: '#000',*/
        color: ["#53f1f2", "#4ebefd", "#30ed9d", "#faa234"],
        series: [
          {
            name: "广东省",
            type: "pie",
            clockWise: true, //顺时加载
            hoverAnimation: true, //鼠标移入变大
            radius: ["80%", "81%"],
            itemStyle: {
              normal: {
                label: {
                  show: true
                },
                labelLine: {
                  show: true,
                  length: 100,
                  smooth: 0.5
                },
                borderWidth: BorderWidth,
                // shadowBlur: 40, // 阴影投散
                borderColor: "rgba(52, 120, 255, 1)",
                shadowColor: "rgba(52, 120, 255, 1)" //边框阴影
              }
            },
            label: {
              alignTo: "edge",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: BorderWidth,
                  color: "#999"
                }
              }
            },
            labelLayout: function(params) {
              var isLeft = params.labelRect.x < fruitChart.getWidth() / 2;
              var points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;

              return {
                labelLinePoints: points
              };
            },
            data: [
              {
                value: 111,
                name: "70%"
              },
              {
                value: 1,
                name: "",
                itemStyle: placeHolderStyle
              }
            ]
          },
          {
            name: "白云区",
            type: "pie",
            clockWise: true,
            hoverAnimation: true,
            radius: ["55%", "56%"],
            // itemStyle: {
            //   normal: {
            //     label: {
            //       show: true,
            //       fontSize: this.$fontSize(0.4)
            //     },
            //     labelLine: {
            //       show: true,
            //       length: this.$fontSize(0.5),
            //       smooth: 6
            //     },
            //     borderWidth: BorderWidth,
            //     borderColor: "#4ebefd"
            //   }
            // },
            label: {
              alignTo: "edge",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: BorderWidth,
                  color: "#999"
                }
              }
            },
            labelLayout: function(params) {
              var isLeft = params.labelRect.x < fruitChart.getWidth() / 2;
              var points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;

              return {
                labelLinePoints: points
              };
            },
            data: [
              {
                value: 6,
                name: "60%"
              },
              {
                value: 4,
                name: "",
                itemStyle: placeHolderStyle
              }
            ]
          },
          {
            name: "均禾街道",
            type: "pie",
            clockWise: true,
            hoverAnimation: true,
            radius: ["30%", "31%"],
            // itemStyle: {
            //   normal: {
            //     label: {
            //       show: true,
            //       fontSize: this.$fontSize(0.4)
            //     },
            //     labelLine: {
            //       show: true,
            //       length: this.$fontSize(0.5),
            //       smooth: 6
            //     },
            //     borderWidth: BorderWidth,
            //     /*shadowBlur: 40,*/
            //     borderColor: "#30ed9d"
            //     /*shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
            //   }
            // },
            label: {
              alignTo: "edge",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: BorderWidth,
                  color: "#999"
                }
              }
            },
            labelLayout: function(params) {
              var isLeft = params.labelRect.x < fruitChart.getWidth() / 2;
              var points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;

              return {
                labelLinePoints: points
              };
            },
            data: [
              {
                value: 5,
                name: "40%"
              },
              {
                value: 5,
                name: "",
                itemStyle: placeHolderStyle
              }
            ]
          },
          {
            name: "广州市",
            type: "pie",
            clockWise: true,
            hoverAnimation: true,
            radius: ["10%", "11%"],
            itemStyle: {
              fontSize: BorderWidth
              // normal: {
              //   label: {
              //     show: true,
              //     fontSize: this.$fontSize(0.4)
              //   },
              //   labelLine: {
              //     show: true,
              //     length: this.$fontSize(0.5),
              //     smooth: 6
              //   },
              //   borderWidth: BorderWidth,
              //   /* shadowBlur: 40,*/
              //   borderColor: "#faa234"
              //   /*shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
              // }
            },
            label: {
              alignTo: "edge",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: BorderWidth,
                  color: "#999"
                }
              }
            },
            labelLayout: function(params) {
              var isLeft = params.labelRect.x < fruitChart.getWidth() / 2;
              var points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;

              return {
                labelLinePoints: points
              };
            },
            data: [
              {
                value: 5,
                name: "30%"
              },
              {
                value: 5,
                name: "",
                itemStyle: placeHolderStyle
              }
            ]
          }
        ]
      });
    }
  }
};
</script>

<style>
</style>